<template>
	<view>
		<div class="report-text" id="content">
			<view class="title">
				食品安全抽样检验抽样单(非食用农产品)
			</view>
			<view class="sample">
				<view class="code">抽样单编号：LMXY25008</view>
				<view class="no">No</view>
			</view>
			<view class="table">
				<view class="table-tr">
					<view class="table-td width-180">任务来源</view>
					<view class="table-td width-250">龙门市场监督监管局</view>
					<view class="table-td width-120">任务类别</view>
					<view class="table-td width-180">口监督抽检口风险监测口评价性抽检</view>
				</view>
				<view class="table-tr-spb">
					<view class="table-td width-60">被抽样单位信息</view>
					<view class="table-tr-flex1">
						<view class="table-dis">
							<view class="table-td width-120">单位名称</view>
							<view class="table-td width-550"></view>
						</view>
						<view class="table-dis">
							<view class="table-td width-120">单位地址</view>
							<view class="table-td width-550"></view>
						</view>
						<view class="table-dis">
							<view class="table-td width-120">网店商铺名称</view>
							<view class="table-td width-550"></view>
						</view>
						<view class="table-dis">
							<view class="table-td width-120">网店地址</view>
							<view class="table-td width-550"></view>
						</view>
						<view class="table-dis">
							<view class="table-td width-120">团经背许可证号/口生产许可证号</view>
							<view class="table-td width-150"></view>
							<view class="table-td width-240"></view>
							<view class="table-td width-180"></view>
						</view>
					</view>
				</view>
			</view>
			<div>由承检机构抽样的，本文书一式两联，第一联交承机构；第二联交被抽样单位。</div>
		</div>
		<button @click="canvasImage.save">打开PDF</button>
	</view>
</template>

<script>
	import {
		base64ToPath
	} from '@/utils/imageTools.js';
	export default {
		data() {
			return {}
		},
		methods: {
			receiveRenderData(url) {
				this.loadBase64Url(url)
			},
			/* 将base64 位的图片路径转换为 临时路径 */
			loadBase64Url(url) {
				const imageStr = url;
				base64ToPath(imageStr)
					.then(path => {
						console.log(path, 'path')
						this.saveImage(path);
					})
					.catch(error => {
						console.error('临时路径转换出错了：', error);
					});
			},
			saveImage(url) {
				uni.saveFile({
					tempFilePath: url,
					async success(res) {
						uni.openDocument({
							filePath: res.savedFilePath,
							success: function(FileRes) {
								console.log('打开成功');
							}
						});
					},
					complete(res) {
						console.log(res, 'res123')
					}
				})
			},
		}
	}
</script>

<script lang="renderjs" module="canvasImage">
	// 引入库
	import html2Canvas from 'html2canvas'
	import jsPDF from 'jspdf'
	export default {
		methods: {
			// 生成图片需要调用的方法
			generateImage(e, ownerFun) {
				return new Promise((resolve, reject) => {
					var shareContent = document.getElementById('content');
					var width = shareContent.offsetWidth / 4;
					var height = shareContent.offsetHeight / 4;
					html2Canvas(document.getElementById('content'), {
						dpi: 900,
						scrolly: 0,
						// width:eleW,//生成后的宽度
						// height:eleH,//生成后的高度
						scrollx: -10,
						useCORS: true, //允许canvas画布内可以跨域请求外部链接图片, 允许跨域请求。
						// backgroundColor: null //避免图片有白色边框
					}).then((canvas) => {
						setTimeout(() => {
							var context = canvas.getContext('2d');
							context.mozImageSmoothingEnabled = false;
							context.webkitImageSmoothingEnabled = false;
							context.msImageSmoothingEnabled = false;
							context.imageSmoothingEnabled = false;
							var pageData = canvas.toDataURL('image/jpeg', 1.0);
							// resolve(pageData)
							var img = new Image();
							img.src = pageData
							img.onload = () => {
								// 获取dom高度、宽度
								img.width = 595.28;
								img.height = 841.89;
								// img.width = img.width / 2;
								// img.height = img.height / 2;
								// console.log(img.width, '------ img.width');
								// console.log(img.height, '------img.height');
								img.style.transform = 'scale(0.5)';
								if (width > height) {
									// 此可以根据打印的大小进行自动调节
									// eslint-disable-next-line
									var pdf = new jsPDF('l', 'mm', [width * 0.505, height *
										0.545
									]);
								} else {
									// eslint-disable-next-line
									var pdf = new jsPDF('p', 'mm', [width * 0.505, height *
										0.545
									]);
								}
								pdf.addImage(pageData, 'jpeg', 0, 0, width * 0.505, height *
									0.545);
								var url = pdf.output("datauristring");
								resolve(url)
							};
						}, 500);

					}).catch((r) => {
						console.log(r);
					})
				})
			},
			async save(e, ownerFun) {
				let img = await this.generateImage().then()
				ownerFun.callMethod('receiveRenderData', img)
			},
		}
	}
</script>

<style lang="scss">
	// .content {
	//     transform: scale(0.8); /* 缩小到80% */
	//     transform-origin: top left; /* 确保缩放是从左上角开始 */
	// }
	.report-text{
		text-align: center;
		font-size: 20rpx;
		padding: 0 10rpx;
		.title{
			font-size: 40rpx;
			font-weight: 500;
			margin-top: 20rpx;
			margin-bottom: 60rpx;
		}
		.sample{
			display: flex;
			justify-content: space-between;
			margin-bottom: 10rpx;
			.code{
				margin-left: 40rpx;
			}
			.no{
				margin-right: 200rpx;
			}
		}
		.table{
			width: 100%;
			border-top: 1rpx solid #000;
			border-left: 1rpx solid #000;
			.table-tr{
				display: flex;
			}
			.table-tr-spb{
				display: flex;
				justify-content: space-between;
				.table-tr-flex1{
					flex: 1;
					// display: flex;
				}
			}
		}
	}
	.table-dis{
		display: flex;
	}
	.table-td{
		display: grid;
		place-items: center; /* 同时垂直和水平居中 */
		border-right: 1rpx solid #000;
		border-bottom: 1rpx solid #000;
	}
	.width-50{
		width: 50rpx;
	}
	.width-60{
		width: 60rpx;
	}
	.width-80{
		width: 80rpx;
	}
	.width-99{
		width: 99rpx;
	}
	.width-100{
		width: 100rpx;
	}
	.width-120{
		width: 120rpx;
	}
	.width-130{
		width: 130rpx;
	}
	.width-140{
		width: 140rpx;
	}
	.width-150{
		width: 150rpx;
	}
	.width-180{
		width: 180rpx;
	}
	.width-210{
		width: 210rpx;
	}
	.width-240{
		width: 240rpx;
	}
	.width-250{
		width: 250rpx;
	}
	.width-500{
		width: 500rpx;
	}
	.width-550{
		width: 553rpx;
	}
</style>